<template>
    <!-- 模板菜单页 -->
    <div>
        <van-nav-bar fixed title="模板工作台" left-text="返回" right-text="新建" left-arrow @click-left="goBack" @click-right="openTemp"/>
        <section class="top">
            <van-row v-for="(menu, i) in menus" :key="i" class="menu">
                <van-col span="12">
                    <p class="menuName" @click="openTemp(menu)">
                        <span>{{menu.name}}</span>
                    </p>
                    <p>
                        <span>{{menu.createDate | formatDate}}</span>
                    </p>
                </van-col>
                <van-col span="9" offset="3">
                    <p>
                        <section style="float: right">
                            <span>
                                <van-button size="small" @click="useTemp(menu)">使用</van-button>
                            </span>
                            <van-button type="warning" size="small" @click="look(menu)">预览</van-button>
                        </section>
                    </p>
                </van-col>
            </van-row>
        </section>
        <!-- 新建模板 -->
        <section>
            <van-dialog v-model="dialog.isShow" show-cancel-button :before-close="addTemp">
                <van-cell title="模板名称" size="large" />
                <van-field v-model="dialog.tempName" placeholder="请输入" :error-message="dialog.errMsg" />
            </van-dialog>
        </section>
    </div>
</template>
<script>
import { menu_listAll, menu_save, menu_findById, menu_active, menu_updateById, menu_updateName } from '@/api/menu'
import {fmtDate} from '@/utils'

export default {
    data() {
        return {
            menus: [],
            dialog: {
                isShow: false,
                tempName: '',
                errMsg: ''
            }
        }
    },
    filters: {
        formatDate(time){
            return fmtDate('yyyy-MM-dd hh:mm', time);
        }
    },
    methods: {
        goBack(){
            this.$router.push('/?' + Date.now());
        },
        openTemp(menu) {
            if(menu){//edit
                this.dialog = { isShow: true, tempName: menu.name, errMsg: '' }
                this.dialog.isSHow = true;
                this.dialog.tempName = menu.name;
                this.dialog.cacheMenu = menu;
            }else{//add
                this.dialog = { isShow: true, tempName: '', errMsg: '' }
            }
        },
        async addTemp(action, done) {//新建模板
            if (action === 'confirm') {
                if (!this.dialog.tempName) {
                    this.dialog.errMsg = '请输入模板名称'
                    done(false);
                    return;
                } else {
                    done();
                    const {code} = !this.dialog.cacheMenu? await menu_save({name: this.dialog.tempName}): await menu_updateName({_id: this.dialog.cacheMenu._id, name: this.dialog.tempName})
                    if(code === 100){
                        this.$toast('操作成功');
                        this.initList();
                    }
                }
            }
            done();
        },
        async useTemp(menu) {
            try {
                await this.$dialog.confirm({ message: '是否使用此模板？' });
                await menu_active(menu);
                this.$toast('操作成功')
                this.$router.push('/')
            } catch (error) {}
        },
        async look(menu) {
            const {code, data} = await menu_findById(menu);
            if(code === 100){
                await this.$store.dispatch('updateCacheTemp', [])
                await this.$store.dispatch('setCacheTemp', data.json)
                await this.$store.dispatch('setBack', data.back)
                await this.$store.dispatch('setTempId', data._id)
                this.$router.push('/workDesk')
            }
        },
        async initList() {
            dd.device.notification.showPreloader()
            let {code, data} = await menu_listAll();
            dd.device.notification.hidePreloader()
            if(code === 100){
                this.menus = data
            }
        }
    },
    created() {
        this.initList();
        this.$store.dispatch('setIsEdit', true);
    }
}
</script>
<style lang="scss" scoped>
.top{
    margin-top: 50px;
}
.menu {
    margin: 5px 0;
    height: 80px;
    border: 1px solid #E4E7ED;
    background-color: #FFF;
    padding: 8px 10px;
    box-shadow: 0 2px 5px #EBEEF5;
}
.menuName span{
    color: #409EFF;
    border-bottom:1px dashed #409EFF; /* #ccc换成链接的颜色 */
}
span .van-button {
    background-color: #C0C4CC;
    border: 1px solid #C0C4CC;
    color: #FFF;
}
</style>
